<template>
  <div class="card">
    <!-- 左侧盒子 -->
    <div class="card-left" :style="{ width: isLeftExpanded ? (isRightExpanded ? '40%' : '100%') : '80px' }">
      <el-card>
        <template #header>
          <div class="card-header" style="display: flex; align-items: center; justify-content: space-between;">
            <h1 v-if="isLeftExpanded">身份信息</h1>
            <div style="cursor: pointer;" @click="toggleLeft">
              <el-icon size="25px">
                <DArrowLeft v-if="isLeftExpanded" />
                <DArrowRight v-else />
              </el-icon>
            </div>
          </div>
        </template>
        <div class="card-left-content" v-if="isLeftExpanded">
          <el-tree
              style="max-width: 600px"
              :data="dataSource"
              node-key="id"
              default-expand-all
              :expand-on-click-node="false"
          >
            <template #default="{ node, data }">
              <div class="custom-tree-node">
                <span>{{ node.label }}</span>
                <div>
                  <el-button type="primary" link @click="append(data)">
                   添加
                  </el-button>
                  <el-button
                      style="margin-left: 4px"
                      type="danger"
                      link
                      @click="remove(node, data)"
                  >
                    删除
                  </el-button>
                </div>
              </div>
            </template>
          </el-tree>
        </div>
        <div style="width:px;height: 300px; " >
          <div ref="chart" class="chart" ></div>
        </div>

      </el-card>
    </div>

    <!-- 右侧盒子 -->
    <div
        class="card-right"
        :style="{ width: isRightExpanded ? '100%' : '80px' }"
    >
      <el-card>
        <template #header>
          <div
              class="card-header"
              style="display: flex; align-items: center; justify-content: space-between;"
          >
            <h1 v-if="isRightExpanded">用户身份</h1>
            <div style="cursor: pointer;" @click="toggleRight">
              <el-icon size="25px">
                <DArrowLeft v-if="isRightExpanded" />
                <DArrowRight v-else />
              </el-icon>
            </div>
          </div>
        </template>
        <div class="card-right-content" v-if="isRightExpanded">
          <el-table :data="data.tableData" style="overflow-y:auto;height: 80vh">
            <el-table-column type="selection"  width="55"/>
            <el-table-column type="index" label=" 序号" width="55"/>
            <el-table-column label="用户名" prop="userName"/>
            <el-table-column label="部门名" prop="departmentName"/>
            <el-table-column label="父部门" prop="parentDepartment"/>
            <el-table-column label="职位名" prop="positionTitle"/>
            <el-table-column label="父职位" prop="parentPositionTitle"/>
            <el-table-column label="用户状态" prop="userStatus">
              <template #default="scope">
                <el-switch v-model="scope.row.userStatus" :active-value="'Enabled'" :inactive-value="'Disabled'"
                           style="--el-switch-on-color: #027a6d; --el-switch-off-color: #ffc107" />
              </template>
            </el-table-column>
            <el-table-column label="操作">
              <el-button-group>
                <el-button type="warning"><el-icon><Edit /></el-icon></el-button>
                <el-button type="danger"><el-icon><Delete /></el-icon></el-button>
              </el-button-group>
            </el-table-column>
          </el-table>
          <el-pagination
              v-model:current-page="data.pageData.pageNum"
              v-model:page-size="data.pageData.pageSize"
              :page-sizes="[10, 15, 20, 25]"
              :size="'default'"
              layout="total, sizes, prev, pager, next, jumper"
              :total="data.pageData.pageTotal"
              @size-change="load()"
              @current-change="load()"
              style="margin-top: 15px;display: flex;justify-self: center;"
          />
        </div>
      </el-card>
    </div>
  </div>
</template>

<script setup lang="ts">
import request from "../../../utils/requests.js";
import {onMounted, reactive, ref} from "vue";
import * as echarts from 'echarts';
import type Node from 'element-plus/es/components/tree/src/model/node'


const data=reactive({
  pageData:{
    pageSize:10,
    pageNum:1,
    pageTotal:0
  },
  tableData:[]

})

const getTableData=()=>{
  request.post("/vwUserRoleDetails/page",
      {
        pageSize:data.pageData.pageSize,
        pageNum:data.pageData.pageNum
      }
  ).then((res) => {
    data.tableData=res.data.list;
    data.pageData.pageNum=res.data.pageNum;
    data.pageData.pageSize=res.data.pageSize;
    data.pageData.pageTotal=res.data.total;
  });
}
const load=()=>{
  getTableData();
}


//////////////////////////////////////////////////////////// 样式 js/////////////////////////////////////////////////////////////

// 控制左侧和右侧盒子的展开状态
const isLeftExpanded = ref(true)
const isRightExpanded = ref(true)
// 切换左侧盒子的状态
const toggleLeft = () => {
  isLeftExpanded.value = !isLeftExpanded.value
}
// 切换右侧盒子的状态
const toggleRight = () => {
  isRightExpanded.value = !isRightExpanded.value
}


interface Tree {
  id: number
  label: string
  children?: Tree[]
}
let id = 1000

const append = (data: Tree) => {
  const newChild = { id: id++, label: 'testtest', children: [] }
  if (!data.children) {
    data.children = []
  }
  data.children.push(newChild)
}

const remove = (node: Node, data: Tree) => {
  const parent = node.parent
  const children: Tree[] = parent.data.children || parent.data
  const index = children.findIndex((d) => d.id === data.id)
  children.splice(index, 1)
  dataSource.value = [...dataSource.value]
}

const dataSource = ref<Tree[]>([
  {
    id: 1,
    label: '校长',
    children: [
      {id: 12, label: '财务专员'},
      {
        id: 4,
        label: '副校长',
        children: [
          { id: 9, label: '部门主任' ,
            children: [
              { id: 13, label: '会员活动专员' },
              { id: 10, label: '后勤管理员' },
              { id: 11, label: '活动策划员' },
              { id: 14, label: '安全督导员' }
            ],
          },
        ]
      },

    ],
  },
])
/////////////////////////////////////////////////// echarts ///////////////////////////////////////////////
const chart = ref<HTMLElement | null>(null);
onMounted(()=>{
  if (chart.value) {
    const myChart = echarts.init(chart.value);

    // 配置项
    const option = {
      title: {
        text: '职位人数',
        left: 'center',
      },
      tooltip: {
        trigger: 'item',
      },
      legend: {
        orient: 'vertical',
        left: 'left',
      },
      series: [
        {
          name: 'Access From',
          type: 'pie',
          radius: '50%',
          data: [
            {value: 1, name: '校长'},
            {value: 1, name: '副校长'},
            {value: 4, name: '部门主任'},
            {value: 1, name: '会员活动专员'},
            {value: 1, name: '后勤管理员'},
            {value: 1, name: '活动策划员'},
            {value: 8, name: '安全督导员'}
          ],
          emphasis: {
            itemStyle: {
              shadowBlur: 10,
              shadowOffsetX: 0,
              shadowColor: 'rgba(0, 0, 0, 0.5)',
            },
          },
        },
      ],
    };

    // 设置配置项并渲染图表
    myChart.setOption(option);
  }
});

load();
</script>

<style scoped lang="scss">
.card {
  display: flex;
  height: calc(100vh - 65px);
  max-height: calc(100vh - 65px);
  overflow: hidden;
  .card-left,
  .card-right {
    transition: width 0.3s ease; // 平滑过渡效果
    overflow: hidden;
    .el-card {
      height: 100%;
    }
  }
  .card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 10px;
    h1 {
      margin: 0;
      font-size: 16px;
    }
  }

  .card-left-content,
  .card-right-content {
    padding: 10px;
  }
}

.custom-tree-node {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 14px;
  padding-right: 8px;
}
.el-card{
  --el-card-padding:5px;
}
.chart {
  width: 100%;
  height: 600px;
}
</style>
